<template>
    <div class="form-block-inner">
        <Form :model="formItem" label-position="top" ref="baseForm">
            <div v-for="(val,index) in dataList" :key="index">
                <div class="title-style">流程节点{{index+1}}-{{ val.node_title }}</div>
                <div v-for="(item,index2) in val.powerList" :key="index2" class="tag-box">
                    <Row :gutter="16">
                        <Col span="10" class="mb10">
                            <FormItem class="required" prop="xq_task" label="节点任务:">
                                 <span slot="label">节点任务:
                                        <Tooltip :content="tip" placement="right" theme="light" max-width="200">
                                            <Icon type="md-help-circle" class="excel-help"/>
                                        </Tooltip>
                                 </span>
                                <div class="form-element">
                                    <Input v-model="item.xq_task" placeholder="请输入节点任务"/>
                                </div>
                            </FormItem>
                        </Col>
                        <Col span="10" class="mb10">
                            <FormItem prop="xq_content" label="节点权限:">
                                <span slot="label">节点权限:
                                        <Tooltip :content="tipPower" placement="right" theme="light" max-width="200">
                                            <Icon type="md-help-circle" class="excel-help"/>
                                        </Tooltip>
                                 </span>
                                <div class="form-element">
                                    <Input v-model="item.xq_content" placeholder="请输入节点权限"/>
                                </div>
                            </FormItem>
                        </Col>
                        <Col span="4">
                            <FormItem label=" " class="col-last-btn">
                                <Button @click="delAction(val, index2)" type="error" shape="circle"
                                        icon="md-close"></Button>
                            </FormItem>
                        </Col>
                        <Col span="10">
                            <FormItem prop="xq_bu_men" label="行权部门（单位）:">
                                <div class="form-element">
                                    <Input v-model="item.xq_bu_men" placeholder="行权部门（单位）"/>
                                </div>
                            </FormItem>
                        </Col>
                        <Col span="5">
                            <FormItem prop="xq_ke_shi" label="行权处室（科室）:">
                                <div class="form-element">
                                    <Input v-model="item.xq_ke_shi" placeholder="行权处室（科室）"/>
                                </div>
                            </FormItem>
                        </Col>
                        <Col span="5">
                            <FormItem prop="xq_people" label="行权人员:">
                                <div class="form-element">
                                    <Input v-model="item.xq_people" placeholder="行权人员"/>
                                </div>
                            </FormItem>
                        </Col>
                        <Divider class="mb10"/>
                    </Row>
                </div>
                <Row>
                    <Col span="24">
                        <Button type="success" @click="add(val.powerList)">添加</Button>
                    </Col>
                </Row>
            </div>
        </Form>
        <div class="btn-style" v-if="dataList.length >0">
            <common-save-btn :base-info-id="baseInfoId" :form-data="dataList" dbName="GovPower"
                             param-filter="powerList"></common-save-btn>
        </div>
    </div>
</template>

<script>
import CommonSaveBtn from '@/components/common-save-btn/index'
import { select } from '@/api/setting'

export default {
  name: 'PowerSetting',
  components: { CommonSaveBtn },
  props: {
    options: {
      type: Array,
      default: () => {
        return []
      }
    },
    tabName: {
      type: String,
      default: () => {
        return ''
      }
    },
    baseInfoId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data () {
    return {
      formItem: {},
      dataList: [],
      tip: '请描述该节点在事项中承担的任务,例如xx事项的受理、xx事项的申报、xx事项的审核等。',
      tipPower: '请描述该节点在事项中所具有的的操作权限，例如有审核权限、驳回权限、需审核的内容、需上传的文件、可编辑申请单哪些属性信息等。'
    }
  },
  methods: {
    init () {
      if (this.tabName === '10') {
        let param = { base_info_id: this.baseInfoId }
        select('GovPower', param).then(res => {
          this.loading = false
          if (res.data.errcode === 0) {
            for (let i = 0; i < this.dataList.length; i++) {
              this.dataList[i].powerList = []
              for (let j = 0; j < res.data.data.length; j++) {
                if (this.dataList[i].id === res.data.data[j].gov_flow_id) {
                  res.data.data[j].base_info_id = this.baseInfoId
                  this.dataList[i].powerList.push(res.data.data[j])
                }
              }
            }
            this.dataList = this.$common.xeUtils.clone(this.dataList)
          } else {
            this.$Message.error('数据获取失败!')
          }
        }).catch(ret => {
          this.loading = false
          // this.$Message.error(ret)
        })
      }
    },
    add (val) {
      val.push({})
      this.dataList = this.$common.xeUtils.clone(this.dataList)
    },
    delAction (item, index) {
      item.powerList.splice(index, 1)
      this.dataList = this.$common.xeUtils.clone(this.dataList)
    }
  },
  watch: {
    options (data) {
      this.dataList = data
    },
    dataList (data) {
      this.$emit('result', data)
    },
    tabName (data) {
      this.init()
    },
    baseInfoId (data) {
      this.baseInfoId = data
    }
  },
  mounted () {
    // this.init()
  }
}
</script>

<style scoped lang="less">
    .btn-style {
        margin-top: 5px;
    }

    .tag-box {
        margin-bottom: 10px;
    }

    .col-last-btn {
        float: right;
        margin-right: 40px;
    }

    .mb10 {
        margin-bottom: 10px;
    }

    .required /deep/ .ivu-form-item-label:before {
        content: '*';
        display: inline-block;
        margin-right: 4px;
        line-height: 1;
        font-family: SimSun;
        font-size: 14px;
        color: #ed4014;
    }

    .excel-help {
        display: inline-block;
        margin-left: 10px;
        font-size: 16px;
        color: orange;
        cursor: pointer;
    }
</style>
